<template>
    <div>
        <div style="height: 60px;">
            订单编号
            <el-input v-model="input" style="width: 240px" placeholder="Please input" />
            状态
            <el-select v-model="value" placeholder="Select" style="width: 240px">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
            <el-button type="primary">查询</el-button>
            <el-button type="primary">重置</el-button>
        </div>
        <!-- 订单列表 -->
        <el-table :data="tableData" style="width: 100%" stripe border>
            <el-table-column type="index" label="行号" width="100" header-align="center" />
            <el-table-column prop="order_l_ddbh" label="订单编号" width="150" header-align="center" />
            <el-table-column prop="order_l_zje" label="订单总金额" width="150" header-align="center" />
            <el-table-column prop="order_l_ctime" label="创建时间" width="300" header-align="center" />
            <el-table-column prop="order_l_zt" label="状态" header-align="center" />

            <el-table-column label="操作" width="180" header-align="center">
                <el-button type="primary" :icon="Edit" circle />
                <el-button type="primary">订单列表</el-button>
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div style="background-color: #fff; height: 50px; ">
            <el-pagination background :page-size="pageSize" layout="total,sizes,prev, pager, next ,jumper"
                :total="total " @size-change="chgsize" @current-change="chgpg" />
        </div>
    </div>



</template>

<script setup>

    import { ref, onMounted } from "vue";
    // 引入图标
    import { Delete, Edit } from "@element-plus/icons-vue";
    // 引入api
    import { queryCustomer } from '@/api/customer.js';
    const handleClick = () => {
        console.log("click");
    };
    // 表格数据
    const tableData = ref([
        {
            order_l_ddbh: 22,
            order_l_zje: 33,
            order_l_ctime: "2025-02-07 15: 46: 24",
            order_l_zt: 1
        }

    ]);
    // 查询数据
    async function initDate() {
        //请求
        let data = {
            page: page.value,
            pageSize: pageSize.value
        };
        let res = await queryCustomer(data);
        // console.log("res>", res)
        if (res.code == 200) {
            tableData.value = res.data.data
            //接收分页信息
            page.value = res.data.page;
            pageSize.value = res.data.pageSize;
            total.value = res.data.total;
        }
    }
    //分页信息
    const page = ref(1);  //当前页
    const pageSize = ref(10); //每页记录数
    const total = ref(0);  //总记录数

    //生命周期钩子
    onMounted(() => {
        //请求
        let data = {
            page: page.value,
            pageSize: pageSize.value,
        };
        initDate();
    })
    //每页记录数变化
    function chgsize(size) {
        console.log(size);
        //更改每页记录数
        pageSize.value = size;
        //从每页开始查询
        page.value = 1
        initDate();
    }
    //页面发生变化
    function chgpg(pg) {
        //更改当前项
        console.log(pg)
        page.value = pg;
        //查询数据
        initDate();

    }


    const value = ref('')

    const options = [
        {
            value: '1',
            label: '内销',
        },
        {
            value: '2',
            label: '外销',
        }
    ]
    const input = ref('')
</script>

<style>


</style>